/**
 * @author : andy
 * @description : 应用配置
 */
import { defineStore, type _DeepPartial } from "pinia";
import { defaultConfig } from "./default";
import { type GlobalConfig, type LangType, type ThemeType } from './types';
import { merge } from "lodash-es";
import type { CSSProperties } from "vue";
import i18n from "@/locales";
export interface ConfigState {
  config: GlobalConfig;
}
const storageKey = 'app_config';
const loadConfig = () => {
  const cached = localStorage.getItem(storageKey) ? JSON.parse(localStorage.getItem(storageKey)!) : undefined;
  if (cached) {
    return cached.config as GlobalConfig;
  }
}
export const useConfigStore = defineStore('appConfig' , {
  state : () => <ConfigState>({
    config : {}
  }),
  persist : {
    key : storageKey,
    storage : localStorage
  },
  getters : {
    /** 是否显示面包屑导航 */
    showBreadcrumbIcon : state => {
      return state.config.breadcrumb.showIcon;
    },
    /** 是否显示面包屑导航中的主页图标 */
    showBreadcrumbHome : state => {
      return state.config.breadcrumb.showHome;
    },
    /** 是否显示侧边栏 */
    showSidebar : state => {
      // 只要不是水平布局就行
      return state.config.app.layout !== 'header-nav';
    },
    /** 是否显示面包屑导航 */
    showBreadcrumb : state => {
      return state.config.breadcrumb.enable &&
      (state.config.app.layout === 'sidebar-nav' ||
      state.config.app.layout === 'header-sidebar-nav')
    },
    /** 是否显示侧边栏占位符 */
    showSidebarPlaceholder : state => {
      return state.config.app.layout === 'header-sidebar-nav' || state.config.app.layout === 'mixed-nav';
    },
    /** 顶栏样式 */
    topStyle : state => {
      return (state.config.app.layout === 'header-sidebar-nav' || state.config.app.layout === 'mixed-nav' ? {
        position : 'fixed',
        top : '0px',
        left : '0px',
        width : '100%',
        zIndex : '1'
      } : {}) as CSSProperties
    },
    /** tabbar边距样式 */
    tabbarStyle : state => {
      return (state.config.app.layout === 'header-sidebar-nav' || state.config.app.layout === 'mixed-nav' ? {
        "margin-left" : `${state.config.sidebar.width}px`,
        'width' : `calc(100% - ${state.config.sidebar.width}px)`
      } : {}) as CSSProperties
    },
    /** 布局容器样式 */
    layoutContentStyle : state => {
      return (state.config.app.layout === 'header-sidebar-nav' || state.config.app.layout === 'mixed-nav' ? {
        "margin-top" : `${(state.config.header.enable ? state.config.header.height : 0) + (state.config.tabbar.enable ? state.config.tabbar.height : 0) + (state.config.app.layout === 'mixed-nav' ? state.config.secondMenu.height : 0)}px`
      } : {}) as CSSProperties
    },
    /** 是否显示侧边栏logo */
    showSidebarLogo : state => {
      return state.config.logo.enable && state.config.app.layout === 'sidebar-nav';
    },
    /** 是否全屏 */
    isFullscreen : state => {
      return state.config.header.hidden && state.config.sidebar.hidden;
    },
    /** 侧边栏是否折叠 */
    isCollapsed : state => {
      return state.config.sidebar.enable && state.config.sidebar.collapsed;
    }
  },
  actions : {
    updateConfig (payload: _DeepPartial<GlobalConfig>) {
      const config = merge({} , this.config , payload);
      this.config = Object.assign({} , this.config , config);
    },
    initConfig () {
      let loadedConfig = loadConfig();
      loadedConfig = loadedConfig ? merge({} , loadedConfig) : undefined;
      if (loadedConfig) {
        this.config = {
          ...loadedConfig,
          auth : defaultConfig.auth
        }
      } else {
        this.config = {...defaultConfig}
      }
      this.updateTheme(this.config.app.theme);
      this.updateFontFamily(this.config.app.family);
      this.updateFontSize(this.config.app.size);
      this.updateRadius(this.config.app.radius);
    },
    updateTheme (theme: ThemeType) {
      this.config = merge({} , this.config , {app : {theme}});
      document.documentElement.dataset.theme = theme;
    },
    updateFontSize (size: number) {
      this.config = merge({} , this.config , {app : {size}});
      document.documentElement.style.setProperty('--font-size-small' , ((size - 2) / 100).toFixed(2) + 'rem');
      document.documentElement.style.setProperty('--font-size-base' , (size / 100).toFixed(2) + 'rem');
      document.documentElement.style.setProperty('--font-size-medium' , ((size + 2) / 100).toFixed(2) + 'rem');
      document.documentElement.style.setProperty('--font-size-large' , ((size + 4) / 100).toFixed(2) + 'rem');
      document.documentElement.style.setProperty('--font-size-larger' , ((size + 6) / 100).toFixed(2) + 'rem');
    },
    updateFontFamily (family: string) {
      this.config = merge({} , this.config , {app : {family}});
      document.documentElement.style.setProperty('--font-family' , family);
    },
    updateRadius (radius: number) {
      this.config = merge({} , this.config , {app : {radius}});
      document.documentElement.style.setProperty('--radius' , (radius / 100) + 'rem');
    },
    /**
     * 切换语言
     * @param lang 语言
     * @param refresh 是否需要刷新页面
     */
    updateLocale (lang: LangType , refresh?: boolean) {
      this.config = merge({} , this.config , {app : {lang}});
      i18n.global.locale.value = lang;
      if (refresh) {
        setTimeout(() => {
          window.location.reload();
        })
      }
    },
    /**
     * 获取当前语言
     */
    getLocale () {
      return i18n.global.locale.value;
    }
  }
});
